*{
    margin: 0px;
    padding: 0px;
}
body{
    display: flex;
    justify-content: center;
    align-items: center;
    /* background-color: rgb(71, 219, 224); */
    background-image: linear-gradient(to bottom right,rgba(104, 103, 103, 0.877),rgb(146, 231, 182) );
    /* #36d1c4 #ff35 */
    padding :0;
    margin: 0;
    min-height: 100vh;
    background-repeat: no-repeat;
    
    
}
div {
    border: 1px solid;
    display: inline-block;
    margin-bottom: 10px;
    padding: 7px;
    border-radius: 10px;
}
table,th,tr,td {
    border: 1px solid ;
    border-collapse: collapse;
    padding: 7px;
   ;
}
.ct{
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    height: 500px;
    width: 600px;
    background-color: rgba(238, 230, 227, 0.986);
    box-shadow: 2px 1px;
    border-radius: 30px;
    margin: 200px;
    
}
.sh {
    padding: 5px;
    display: flex;
    align-items: center;
    border-radius: 10px;
}

th,
input[type=button] {
    background-color: rgba(146, 231, 182);
}

input[value=删除],
input[value=编辑] {
    background-color: rgba(216, 231, 160, 0.877);
    width: 60px;
  padding: 10px; /* 内边距 */
  border: 2px solid #ccc; /* 边框 */
  border-radius: 5px; /* 圆角 */
  font-size: 14px;
  outline: none;
  
}

input[name=keyword],
input[value=过滤],
input[value=新增] {
    margin-right: 5px;
    width: 100px;
  padding: 10px; /* 内边距 */
  border: 2px solid #ccc; /* 边框 */
  border-radius: 5px; /* 圆角 */
  font-size: 14px;
  outline: none;
  
}
input:hover {
    border-color: #999; /* 鼠标悬停时边框变色 */
  }
  
  input:focus {
    border-color: #007bff; /* 聚焦时边框颜色 */
    box-shadow: 0 0 5px rgba(0,123,255,0.5); /* 添加发光效果 */
  }
  input {
    background-color: #f8f9fa; /* 背景色 */
    box-shadow: 0 2px 4px rgba(0,0,0,0.1); /* 添加阴影 */
    transition: all 0.3s; /* 动画过渡效果 */
  }